import React, { Component } from 'react';
import { Table, Tag, Space } from 'antd';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import CamXAxisForm from './hdForms/CamXAxisForm';
import CamYAxisForm from './hdForms/CamYAxisForm';
import CamZAxisForm from './hdForms/CamZAxisForm';
import CamRAxisForm from './hdForms/CamRAxisForm';

import CbjXAxisForm from './hdForms/CbjXAxisForm';
import CbjYAxisForm from './hdForms/CbjYAxisForm';
import CbjZAxisForm from './hdForms/CbjZAxisForm';
import CbjRAxisForm from './hdForms/CbjRAxisForm';
import CbjCutForm from './hdForms/CbjCutForm';

import BigCutterXAxisForm from './hdForms/BigCutterXAxisForm';
import BigCutterYAxisForm from './hdForms/BigCutterYAxisForm';
import BigCutterZAxisForm from './hdForms/BigCutterZAxisForm';
import BigCutterRAxisForm from './hdForms/BigCutterRAxisForm';
import BigCutterWAxisForm from './hdForms/BigCutterWAxisForm';

import SmallCutterXAxisForm from './hdForms/SmallCutterXAxisForm';
import SmallCutterYAxisForm from './hdForms/SmallCutterYAxisForm';
import SmallCutterZAxisForm from './hdForms/SmallCutterZAxisForm';
import SmallCutterRAxisForm from './hdForms/SmallCutterRAxisForm';
import SmallCutterWAxisForm from './hdForms/SmallCutterWAxisForm';

import LineCamThresData from './hdForms/LineCamThresData';
import BigCutterCamCheckThres from './hdForms/BigCutterCamThresData';
import SmallCutterCamCheckThres from './hdForms/SmallCutterCamThresData';
import CamIPConnectForm from './hdForms/CamIPConnectForm';

import { Stage, Layer, Text, Image, Line, Label, Rect } from 'react-konva';

@connect(({ hdst, ds }) => ({ hdst, ds }))
@Form.create()
class HdSettings extends Component {
  constructor(props) {
    super(props);
  }
  state = {};

  render() {
    const Panel = Collapse.Panel;
    const columns = [
      {
        title: 'I/O',
        dataIndex: 'I/O',
        key: 'I/O',
      },
      {
        title: formatMessage({ id: 'app.tools.Start' }),
        dataIndex: 'start',
        key: 'start',
      },
      {
        title: formatMessage({ id: 'app.tools.Comment' }),
        dataIndex: 'annotation',
        key: 'annotation',
      },
    ];
    const gridStyle1 = {
      width: '40%',
      textAlign: 'left',
    };
    const { camZmcIOStates } = this.props.ds;
    const {
      camZmcParams,
      cbjZmcParams,
      bigCutterZmcParams,
      smallCutterZmcParams,
      lineCamCheckThres,
      bigCutterCamCheckThres,
      smallCutterCamCheckThres,
      cameraIP,
    } = this.props.hdst;

    return (
      <>
        <Collapse onChange={this.callback} style={{ marginLeft: 10, marginTop: 50 }}>
          <Panel header={formatMessage({id: 'app.tools.camZmcParamsSetting'})} key="1">
            {/* <Card
              title={<font style={{ color: '#FF0000', fontSize: 16 }}>上料控制器X轴参数设置(横梁平移轴)</font>}
            >
              <CamXAxisForm camZmcParams={camZmcParams} />
            </Card> */}
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.camZmcParamsSetting(tile Y)'})}</font>
              }
            >
              <CamYAxisForm camZmcParams={camZmcParams} />
            </Card>
            {/* <Card
              title={<font style={{ color: '#FF0000', fontSize: 16 }}>上料控制器Z轴参数设置(横梁上下轴)</font>}
            >
              <CamZAxisForm camZmcParams={camZmcParams} />
            </Card>
            <Card
              title={<font style={{ color: '#FF0000', fontSize: 16 }}>上料控制器R轴参数设置(横梁旋转轴)</font>}
            >
              <CamRAxisForm camZmcParams={camZmcParams} />
            </Card> */}
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.cbjZmcParamsSetting'})} key="2">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.cbjZmcParamsSetting(tile X)'})}</font>}>
              <CbjXAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.cbjZmcParamsSetting(tile Y)'})}</font>}>
              <CbjYAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.cbjZmcParamsSetting(tile Z)'})}
                </font>
              }
            >
              <CbjZAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.cbjZmcParamsSetting(tile R)'})}
                </font>
              }
            >
              <CbjRAxisForm cbjZmcParams={cbjZmcParams} />
            </Card>
            <Card
              title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.cbjZmcParamsSettingcuttingDragging'})}</font>}
            >
              <CbjCutForm cbjZmcParams={cbjZmcParams} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.bigCutterParamsSetting'})} key="3">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.bigCutterParamsSetting(tile X)'})}</font>
              }
            >
              <BigCutterXAxisForm bigCutterZmcParams={bigCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.bigCutterParamsSetting(tile Y)'})}</font>
              }
            >
              <BigCutterYAxisForm bigCutterZmcParams={bigCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.bigCutterParamsSetting(tile Z)'})}
                </font>
              }
            >
              <BigCutterZAxisForm bigCutterZmcParams={bigCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.bigCutterParamsSetting(tile R)'})}
                </font>
              }
            >
              <BigCutterRAxisForm bigCutterZmcParams={bigCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.bigCutterParamsSetting(tile W)'})}
                </font>
              }
            >
              <BigCutterWAxisForm bigCutterZmcParams={bigCutterZmcParams} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.smallCutterParamsSetting'})} key="4">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.smallCutterParamsSetting(tile X)'})}</font>
              }
            >
              <SmallCutterXAxisForm smallCutterZmcParams={smallCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.smallCutterParamsSetting(tile Y)'})}</font>
              }
            >
              <SmallCutterYAxisForm smallCutterZmcParams={smallCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.smallCutterParamsSetting(tile Z)'})}
                </font>
              }
            >
              <SmallCutterZAxisForm smallCutterZmcParams={smallCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.smallCutterParamsSetting(tile R)'})}
                </font>
              }
            >
              <SmallCutterRAxisForm smallCutterZmcParams={smallCutterZmcParams} />
            </Card>
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>
                  {formatMessage({id: 'app.tools.smallCutterParamsSetting(tile W)'})}
                </font>
              }
            >
              <SmallCutterWAxisForm smallCutterZmcParams={smallCutterZmcParams} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.camIdentificationThresholdSetting'})} key="5">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.camIdentificationThresholdSetting'})}</font>
              }
            >
              <LineCamThresData lineCamCheckThres={lineCamCheckThres} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.bigCutterIdentificationThresholdSetting'})} key="6">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.bigCutterIdentificationThresholdSetting'})}</font>
              }
            >
              <BigCutterCamCheckThres bigCutterCamCheckThres={bigCutterCamCheckThres} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.smallCutterIdentificationThresholdSetting'})} key="7">
            <Card
              title={
                <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.smallCutterIdentificationThresholdSetting'})}</font>
              }
            >
              <SmallCutterCamCheckThres smallCutterCamCheckThres={smallCutterCamCheckThres} />
            </Card>
          </Panel>
          <Panel header={formatMessage({id: 'app.tools.cameraIPConnectionSetting'})} key="8">
            <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({id: 'app.tools.cameraIPConnectionSetting'})}</font>}>
              <CamIPConnectForm cameraIP={cameraIP} />
            </Card>
          </Panel>
        </Collapse>
      </>
    );
  }
}
export default HdSettings;
